<template>

	<div class="">
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh" style="overflow: scroll;height: 100vh;padding-bottom: 50px;">
						<div class="rightCon">
							<headerPcTow :title="$t('l_zhongxinqianbao')" :isShow="true"></headerPcTow>

							<div class="container scroll-container" style="width: 100%;">
								<div class="walle_center_box" style="padding: 0;">
									<div class="recycle_boxTow">
										<div class="recycle_leftTow">
											<div class="accout_box">
												<span>{{$t('l_pingtaiyue')}}</span>
												<span class="accout_numTow">{{userInfo?userInfo.money:0}}</span>
												<i class="iconsTow" @click="reloadUserInfo(true)">
													<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite">

														</use>
													</svg>
												</i>
											</div>
											<div class="accout_box">
												<span>{{$t('l_youxineitongjiyue')}}</span>
												<span class="accout_numTow">{{allMoney}}</span>
												<i class="iconsTow" @click="userBalanceAll">
													<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite">

														</use>
													</svg>
												</i>
											</div>
										</div>

										<div class="recycle_btnTow" @click="transferAll">
											<span>{{$t('l_yijianhuishou')}}</span>
										</div>
									</div>

									<div class="section_box">
										<div class="left_nav_boxTow">
											<div :class="'nav_listTow '+(navIndex==0?'activeTow':'')"
												@click="navIndex=0">
												<div class="nav_iconTow">
													<i class="iconsTow">
														<svg viewBox="0 0 37 30" width="25px" height="25px"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use xlink:href="/icons/icon.svg#icon_dtfl_2zh_0--sprite">

															</use>
														</svg>
													</i>
												</div>
												<div class="nav_textTow">
													{{$t('l_quanbu')}}
												</div>
											</div>
											<div :class="'nav_listTow '+(navIndex==item.id?'active':'')"
												v-for="(item,index) in navs" :key="index" @click="navIndex=item.id">
												<div class="nav_iconTow">
													<i class="iconsTow"><svg viewBox="0 0 37 30" width="25px"
															height="25px" fill="currentColor" aria-hidden="true"
															focusable="false">
															<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'">
															</use>
														</svg></i>
												</div>
												<div class="nav_textTow">
													{{item.name}}
												</div>
											</div>
										</div>
										<div class="right_box">
											<div class="search_boxTow">
												<el-input :placeholder="$t('l_pingtaisousuo')" v-model="keyword"
													class="search_boxTowInput">
													<i slot="suffix"
														class="el-input__icon el-icon-search right_icon"></i>
												</el-input>
												<div class="recycle_btnTow">
													{{$t('l_sousuo')}}
												</div>
											</div>
											<div class="right_item_box"
												style="padding-bottom: 10px;justify-content: flex-start;">
												<div class="right_itemTow" v-for="(item,index) in lists" :key="index"
													v-if="(item.gameType.indexOf(','+navIndex+',')!==-1 || navIndex==0) && (keyword=='' || item.name.toUpperCase().indexOf(keyword.toUpperCase())!==-1 || item.code.toUpperCase().indexOf(keyword.toUpperCase())!==-1)">
													<div class="item_topTow">
														<!-- <img :src="$F.getApiUrl()+'/gametype/'+item.code+'.png'" /> -->
														<span>{{item.name}}</span>
													</div>
													<div class="balanceTow">
														{{item.money}}
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<div class="walletCenter pageContainer">
					<navHeader :title="$t('l_zhongxinqianbao')"></navHeader>

					<div class="container scroll-container">
						<div class="walle_center_box">

							<div class="recycle_box">
								<div class="recycle_left">
									<div class="accout_box">
										<span>{{$t('l_pingtaiyue')}}</span>
										<span class="accout_num">{{userInfo?userInfo.money:0}}</span>
										<i class="icons" @click="reloadUserInfo(true)">
											<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite">

												</use>
											</svg>
										</i>
									</div>
									<div class="accout_box">
										<span>{{$t('l_youxineitongjiyue')}}</span>
										<span class="accout_num">{{allMoney}}</span>
										<i class="icons" @click="userBalanceAll">
											<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
												fill="currentColor" aria-hidden="true" focusable="false">
												<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite">

												</use>
											</svg>
										</i>
									</div>
								</div>

								<div class="recycle_btn" @click="transferAll">
									<span>{{$t('l_yijianhuishou')}}</span>
								</div>
							</div>

							<div class="section_box">
								<div class="left_nav_box">
									<div :class="'nav_list '+(navIndex==0?'active':'')" @click="navIndex=0">
										<div class="nav_icon">
											<i class="icons" style="color: var(--theme-text-color-side-tabs);">
												<svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use xlink:href="/icons/icon.svg#icon_dtfl_2zh_0--sprite">

													</use>
												</svg>
											</i>
										</div>
										<div class="nav_text">
											{{$t('l_quanbu')}}
										</div>
									</div>
									<div :class="'nav_list '+(navIndex==item.id?'active':'')"
										v-for="(item,index) in navs" :key="index" @click="navIndex=item.id">
										<div class="nav_icon">
											<i class="icons" style="color: var(--theme-text-color-side-tabs);"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
												</svg></i>
										</div>
										<div class="nav_text">
											{{item.name}}
										</div>
									</div>
								</div>
								<div class="right_box">
									<div class="search_box">
										<el-input :placeholder="$t('l_pingtaisousuo')" v-model="keyword">
											<i slot="suffix" class="el-input__icon el-icon-search right_icon"></i>
										</el-input>
									</div>
									<div class="right_item_box">
										<div class="right_item" v-for="(item,index) in lists" :key="index"
											v-if="(item.gameType.indexOf(','+navIndex+',')!==-1 || navIndex==0) && (keyword=='' || item.name.toUpperCase().indexOf(keyword.toUpperCase())!==-1 || item.code.toUpperCase().indexOf(keyword.toUpperCase())!==-1)">
											<div class="item_top">
												<!-- <img :src="$F.getApiUrl()+'/gametype/'+item.code+'.png'" /> -->
												<span>{{item.name}}</span>
											</div>
											<div class="balance">
												{{item.money}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'

	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				keyword: '',
				lists: [],
				navIndex: 0,
				allMoney: 0,
				userInfo: null,
				navs: [{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_dtfl_dz_0',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_dtfl_qp_0',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_dtfl_by_0',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_dtfl_zr_0',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_dtfl_ty_0',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_dtfl_cp_0',
					},
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				]
			}
		},
		mounted() {
			if (localStorage.getItem('token')) {
				this.userInfo = localStorage.getItem('userInfo')
				this.reloadUserInfo()
			}
			this.userBalanceAll()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			transferAll() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userTransferAll({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.$message.success(res.msg)
						this.reloadUserInfo(true)
						this.userBalanceAll()
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', res.data)
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			userBalanceAll() {
				this.allMoney = 0
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userBalanceAll({}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.lists = res.data
						res.data.forEach((item, index) => {
							this.allMoney += item.money
						})
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		}
	}
</script>

<style>
	.search_boxTowInput .el-input__inner {
		border-radius: 5px !important;
		height: 40px !important;
		padding: 0 15px !important;
		font-size: 15px !important;
	}

	.search_boxTowInput .el-input__icon {
		width: 30px !important;
		line-height: 35px !important;
		font-size: 16px !important;
	}
</style>
<style scoped>
	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.walletCenter {
		width: 100vh;
		min-height: 100vh;
		background-color: var(--theme-bg-color);
	}

	.walle_center_box {
		padding: 0 0.2rem;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.recycle_box {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.25rem 0.2rem;
		margin-top: .2rem;
	}

	.recycle_boxTow {
		background-color: var(--theme-main-bg-color);
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		margin-top: 20px;
	}

	.recycle_left {
		color: var(--theme-text-color-lighten-withshadow);
		font-size: .18rem;
	}

	.recycle_leftTow {
		color: var(--theme-text-color-lighten-withshadow);
		font-size: 16px;
	}

	.accout_box {
		display: flex;
		align-items: center;
	}

	.accout_num {
		color: var(--theme-secondary-color-finance);
		margin: 0 0.1rem;
		font-size: .24rem
	}

	.accout_numTow {
		color: var(--theme-secondary-color-finance);
		margin: 0 10px;
		font-size: 20px
	}

	.icons {
		color: var(--theme-primary-color);
		font-size: .38rem;
	}

	.iconsTow {
		color: var(--theme-text-color-side-tabs);
		font-size: 24px;
		cursor: pointer;
	}

	.recycle_btn {
		font-size: .2rem;
		background-color: var(--theme-primary-color);
		width: 1.2rem;
		/* height: 0.5rem; */
		color: var(--theme-primary-font-color);
		text-align: center;
		/* line-height: 0.5rem; */
		border-radius: 0.14rem;
		font-weight: 300;
		padding: 0 0.06rem;
	}

	.recycle_btnTow {
		font-size: 15px;
		background-color: var(--theme-primary-color);
		width: 84px;
		height: 35px;
		cursor: pointer;
		color: var(--theme-primary-font-color);
		text-align: center;
		line-height: 35px;
		border-radius: 5px;
		font-weight: 300;
		margin-left: 10px;
	}

	.section_box {
		display: flex;
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.left_nav_box {
		width: 1.5rem;
		font-weight: 300;
		margin-right: .2rem;
		overflow-y: overlay;
	}

	.left_nav_boxTow {
		font-weight: 300;
		margin-right: 20px;
		overflow-y: overlay;
		width: 10%;
	}

	.nav_list {
		width: 1.5rem;
		height: 0.7rem;
		margin-top: 0.2rem;
		padding: 0 0.04rem 0 0.06rem;
		border-radius: 0.1rem;
		color: var(--theme-text-color-side-tabs);
		position: relative;
		display: flex;
		align-items: center;
		background: var(--theme-bg-color);
	}

	.nav_listTow {
		height: 42px;
		margin-top: 20px;
		border-radius: 5px;
		color: var(--theme-text-color-side-tabs);
		position: relative;
		display: flex;
		align-items: center;
		cursor: pointer;
		justify-content: center;
		background: var(--theme-bg-color);
	}

	/* .nav_listTow:hover {
	color:var(--theme-primary-color);
} */
	.nav_bg {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 1;
	}

	.nav_icon {
		font-size: .6rem;
		z-index: 10;
		position: relative;
		top: 0.06rem;
	}

	.nav_iconTow {
		font-size: 12px;
		z-index: 10;
		position: relative;
		margin-right: 7px;
	}

	.nav_text {
		font-size: .24rem;
		position: relative;
		z-index: 10;
		width: 0.96rem;
		text-align: center;
	}

	.nav_textTow {
		font-size: 15px;
		position: relative;
		z-index: 10;
		text-align: center;
	}

	.active {
		background: var(--theme-primary-color);
		color: var(--theme-primary-font-color);
	}

	.activeTow {
		background: var(--theme-primary-color);
		color: var(--theme-primary-font-color);
	}

	.right_box {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.search_box {
		margin: 0.2rem 0;
	}

	.search_boxTow {
		margin: 20px 0;
		padding: 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
		background: var(--theme-main-bg-color);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
	}

	.right_icon {
		color: var(--theme-primary-color);
	}

	.el-input__inner {
		border-radius: 0.5rem;
		height: .5rem;
		padding: 0 0.2rem;
	}


	.right_item_box {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 1rem;
		overflow-y: overlay;
		align-content: flex-start;
	}

	.right_itemTow {
		font-size: 15px;
		width: 24%;
		background-color: var(--theme-main-bg-color);
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.right_itemTow:nth-child(4n-2) {
		margin-left: 10px;
		margin-right: 5px;
	}

	.right_itemTow:nth-child(4n-1) {
		margin-left: 5px;
		margin-right: 10px;
	}

	.right_item {
		font-size: .2rem;
		width: 2.6rem;
		background-color: var(--theme-main-bg-color);
		border-radius: 0.14rem;
		margin-bottom: 0.2rem;
	}

	.item_top {
		border-bottom: 0.01rem solid var(--theme-color-line);
		display: flex;
		padding: 0.1rem 0.13rem;
		align-items: center;
	}

	.item_topTow {
		border-bottom: 1px solid var(--theme-color-line);
		display: flex;
		padding: 10px 13px;
		align-items: center;
	}

	.item_top img {
		width: 0.4rem;
		height: 0.4rem;
		margin-right: 0.2rem;
	}

	.item_top span {
		color: var(--theme-text-color);
		font-size: .24rem;
	}

	.item_topTow img {
		width: 21px;
		height: 21px;
		margin-right: 10px;
	}

	.item_topTow span {
		color: var(--theme-text-color);
		font-size: 15px;
	}

	.balance {
		color: var(--theme-secondary-color-finance);
		padding: 0.15rem 0.2rem 0.1rem;
	}

	.balanceTow {
		color: var(--theme-secondary-color-finance);
		padding: 15px 20px 10px;
		font-size: 13px;
	}
</style>